<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/example.css?v=1.0" />
    <link rel="stylesheet" type="text/css" href="css/weui.min.css?v=1.0" />
    <link rel="stylesheet" type="text/css" href="css/element-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/vant.min.css" />
    <link rel="stylesheet" type="text/css" href="css/public.css?v=5.0" />
    <link rel="stylesheet" type="text/css" href="css/listLook.css?v=7.0.1" />
    <link rel="stylesheet" type="text/css" href="css/seekList.css?v=1.0.2" />
    <title>列表查看</title>
    <style>
        .ub-community>div>div {
            padding-right: 40px;
        }

        .ub-community>div>div>div {
            color: #000;
            font-size: 14px;
            width: 100%;
            padding: 5px;
            background: none;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: initial;
            padding-right: 50px;
        }

        .ub-community .ub-sl_name {
            width: 116px;
            color: #333333;
            font-size: 15px;
        }

        .ub-community .ub-sl_count {
            color: #206DFF;
            font-size: 12px;
            width: 60px;
            padding: 5px;
            background: #F4F5F9;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="main">
        <!-- 头部背景图片 -->
        <div class="ub-listBanner">
            <img src="images/care_bg.png">
        </div>
        <div class="ub-listContentBg" style="top: 60vw;">
            <!-- 行业，列表。tab切换 -->
            <div class="ub-listTitle">
                <div v-cloak class="ub-titleActive">
                    社区 ( {{monitorCommunityList.length}} )
                    <div class="ub-line"></div>
                </div>
            </div>
            <div class="ub-line1"></div>
            <!-- 行业下展示场所分类，网格下展示社区分类 -->
            <div style="background: #fff;padding-top: 10px;">
                <div v-cloak style="margin: 5px 0 0 20px;color: #888888;">人员总数:
                    &nbsp;<span style="color: #FF5000;">{{total}}人</span>
                </div>
                <!-- 头部搜索框 -->
                <div class="ub-search">
                    <div class="ub-input">
                        <img src="images/placeSearch.png" alt="">
                        <input type="text" placeholder="请输入搜索内容" v-model.trim="searchVal" @change="searchChange">
                        <div class="ub-search_button" @click="search">
                            <span v-show="!searchLoading">搜索</span>
                            <i v-show="searchLoading" class="el-icon-loading"></i>
                        </div>
                    </div>
                </div>
                <div v-cloak class="ub-listContent2" style="background: #EEF5FC;">
                    <div v-cloak v-for="(item, index) in monitorCommunityList" :key="item.dept_id"
                        class="ub-communityContent" v-show="item.count !=0">
                        <div class="ub-community ub-layout">
                            <div>
                                <img src="images/listIcon15.png" alt="">
                                <div style="display: flex; flex-direction: column; align-items: flex-start;">
                                    <div v-cloak>
                                        <span class="ub-sl_name">
                                            {{item.name}}
                                        </span>
                                        <span class="ub-sl_count">{{item.count}}</span>
                                    </div>
                                    <span style="display: flex; margin-top: 10px;">
                                        <span class="ub-pl_in_select">
                                            <select name="year" id="year" v-model="item.year"
                                                @change="changeYear(item)">
                                                <option :value="item" v-for="item in yearArr" :key="item" v-cloak>
                                                    {{item}}
                                                </option>
                                            </select>
                                        </span>
                                        <span class="ub-pl_in_c">
                                            <span class="ub-pl_text1" @click="changeRate(item,-1)">&lt;</span>
                                            <span class="ub-pl_text2" v-cloak
                                                style="font-size:10px;">第{{item.week}}周走访率:{{item.care_rate}}%</span>
                                            <span class="ub-pl_text1" @click="changeRate(item,1)">></span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div @click="id = id ?'':item.dept_id" class="ub-lookBth">{{id == item.dept_id?'收起':'查看'}}
                            </div>
                        </div>
                        <div class="ub-grid" v-show="id == item.dept_id">
                            <div v-for="(e,i) in item.user_list" :key="e.user_id" class="ub-gridContent"
                                v-show="e.count !=0">
                                <div style="padding-right: 40px;">
                                    <p style="width: 90%;">
                                        <span @click="handleMonitorMarker(e.dept_id,e.user_id)"
                                            style="color: #000;">{{e.realname}}</span>
                                        <span style="display: flex; margin-top: 10px;">
                                            <span class="ub-pl_in_select">
                                                <select name="year" id="year" v-model="e.year"
                                                    @change="changeYearPerson($event,e,item.dept_id)">
                                                    <option :value="item" v-for="item in yearArr" :key="item" v-cloak>
                                                        {{item}}
                                                    </option>
                                                </select>
                                            </span>
                                            <span class="ub-pl_in_c">
                                                <span class="ub-pl_text1"
                                                    @click="changeRatePerson(e,item.dept_id,-1)">&lt;</span>
                                                <span class="ub-pl_text2" v-cloak
                                                    style="font-size:10px;">第{{e.week}}周走访率:{{e.care_rate}}%</span>
                                                <span class="ub-pl_text1"
                                                    @click="changeRatePerson(e,item.dept_id,1)">></span>
                                            </span>
                                        </span>

                                    </p>
                                    <div @click="handleMonitorMarker(e.dept_id,e.user_id)">{{e.count}}人</div>
                                </div>
                                <img src="images/listRight.png" @click="handleMonitorMarker(e.dept_id,e.user_id)">
                            </div>
                            <div @click="id = ''" class="ub-packUp">
                                <img src="images/packUp.png">
                            </div>
                        </div>
                    </div>
                    <el-empty description="暂无数据" v-show="monitorCommunityList.length==0"></el-empty>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vant.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jwt-decode.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/cHttp.js?v=1.0.0" type="text/javascript" charset="utf-8"></script>
    <script src="js/wxPublic.js?v=15.0.0" type="text/javascript" charset="utf-8"></script>
    <script src="js/seekList.js?v=1.0.6" type="text/javascript" charset="utf-8"></script>
</body>

</html>